import React, { useEffect, useState } from 'react'
import { nanoid } from 'nanoid'

import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import "./index.css"
export default function App() {
    const [todoList, setTodoList] = useState([]
        // [
        //     { id: nanoid(), todo: '演讲', check: false },
        //     { id: nanoid(), todo: '女保镖', check: false },
        //     { id: nanoid(), todo: '霰弹', check: false },
        //     { id: nanoid(), todo: '失去梦想', check: false }
        // ]
    )

    useEffect(() => {
        setTodoList(JSON.parse(localStorage.getItem("todoList")) || [])
    }, [])


    useEffect(() => {
        localStorage.setItem("todoList", JSON.stringify(todoList))
    }, [todoList])



    //添加任务函数
    function updateTodoList(data) {
        setTodoList([data, ...todoList])
    }


    return (
        <div id="root">
            <div className="todo-container">
                <div className="todo-wrap">
                    <Header updateTodoList={updateTodoList} />
                    <List todoList={todoList} setTodoList={setTodoList} />
                    <Footer todoList={todoList} setTodoList={setTodoList} />
                </div>
            </div>
        </div>
    )
}
